<template>
    <fieldset>
        <form action="" @submit.prevent="add()">
             <h3>来访者信息登记表</h3>
                <p>姓名：<input type="text" placeholder="请输入姓名" v-model.lazy.trim="uname"></p>
                <p>手机号码：<input type="tel" placeholder="请输入手机号码" v-model.lazy.trim="utel"></p>
                <p>性别:
                        <input type="radio" value="0" v-model="gender"/><span>女</span>
                        <input type="radio" value="1" v-model="gender" /><span>男</span>
                    </p>
                    <p>来访者身份：
                        <select name="" id="" required v-model.number="shenfen">
                            <option value="" disabled>--教育局工作人员--</option>
                            <option value="1">局长</option>
                            <option value="2">所长</option>
                        </select>
                    </p>
                    <p>来访原因：<input type="text" placeholder="请输入来访原因" v-model.lazy.trim="yuanyin"></p>
                    <input type="submit" value="提交">
        </form>            
                    <h3>来访者信息收集：</h3>
                        <VisitFSonComVue :sonmsg='msg'/>
                        <VisitSSonComVue :sonmsg='msg'/>
                        <VisitTSonComVue :sonmsg='msg'/>
        
    </fieldset>
</template>

<script setup>
import { reactive,ref } from 'vue';
import VisitFSonComVue from "./VisitFSonCom.vue";
import VisitSSonComVue from "./VisitSSonCom.vue";
import VisitTSonComVue from "./VisitTSonCom.vue";
let msg = reactive({
    uname:'',
    utel : '',
    gender : '',
    shenfen:'',
});
let uname = ref('');
let gender = ref('');
let shenfen = ref('');
let utel = ref('');
let yuanyin = ref('');
let add =()=>{
    msg.uname = uname.value;
    msg.gender = gender.value;
    msg.shenfen = shenfen.value;
    msg.utel = utel.value;
    msg.yuanyin = yuanyin.value;
    console.log(msg);
    
}
</script>

<style>

</style>